<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>里斯案例相册</title>

    <!-- Flickity CSS -->
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="album-container">
        <!-- 主相册 -->
        <div class="main-carousel" id="main-carousel">
            <!-- 图片将通过JavaScript动态生成 -->
        </div>

        <!-- 时间轴导航 -->
        <div class="timeline-nav" id="timeline-nav">
            <!-- 年份将通过JavaScript动态生成 -->
        </div>
        <!-- 隐藏代理导航（与主相册 1:1，用于 asNavFor） -->
        <div class="timeline-proxy" id="timeline-proxy"></div>

    </div>

    <!-- 加载指示器 -->
    <div class="loading-indicator" id="loading-indicator">
        <div class="spinner"></div>
        <p>正在加载相册...</p>
    </div>

    <!-- 错误提示 -->
    <div class="error-message" id="error-message" style="display: none;">
        <h3>加载失败</h3>
        <p>无法加载相册数据，请刷新页面重试。</p>
    </div>

    <!-- 嵌入albumData -->
    <script>
        // 从里斯官网获取的真实数据
        const albumData = {
            "2007": [],
            "2012": [
                {"id":"630","url":"/upload/202412/09/202412091635337547.png","title":"杰克"}
            ],
            "2013": [
                {"id":"635","url":"/upload/202412/09/202412091649285496.png","title":"老板电器"},
                {"id":"639","url":"/upload/202412/09/202412091656218533.png","title":"桃李"}
            ],
            "2014": [
                {"id":"634","url":"/upload/202412/09/202412091643586384.png","title":"王老吉"}
            ],
            "2016": [
                {"id":"608","url":"/upload/202412/16/202412161419463757.png","title":"长城汽车"}
            ],
            "2017": [
                {"id":"636","url":"/upload/202412/09/202412091651030945.png","title":"德邦"},
                {"id":"637","url":"/upload/202412/09/202412091654171013.png","title":"久盛"}
            ],
            "2018": [
                {"id":"627","url":"/upload/202412/09/202412091616376414.png","title":"君乐宝"},
                {"id":"629","url":"/upload/202412/09/202412091630275330.png","title":"大角鹿"}
            ],
            "2019": [
                {"id":"609","url":"/upload/202412/05/202412052327059540.png","title":"茅台"},
                {"id":"641","url":"/upload/202412/09/202412091658172732.png","title":"奥克斯"},
                {"id":"646","url":"/upload/202412/09/202412091705223220.png","title":"康巴赫"}
            ],
            "2020": [
                {"id":"632","url":"/upload/202412/09/202412091640287927.png","title":"香飘飘"},
                {"id":"633","url":"/upload/202412/09/202412091641567664.png","title":"罗莱家纺"},
                {"id":"640","url":"/upload/202412/09/202412091656588494.png","title":"农银壹私行"},
                {"id":"642","url":"/upload/202412/09/202412091700480261.png","title":"雨虹防水"},
                {"id":"644","url":"/upload/202412/09/202412091702551365.png","title":"洽洽"},
                {"id":"645","url":"/upload/202412/09/202412091704056199.png","title":"三只松鼠"}
            ],
            "2021": [
                {"id":"638","url":"/upload/202412/09/202412091655195642.png","title":"百洋医药迪巧"},
                {"id":"643","url":"/upload/202412/09/202412091701486834.png","title":"习酒"}
            ],
            "2023": [
                {"id":"648","url":"/upload/202412/09/202412091715309255.jpg","title":"卫龙"}
            ],
            "2024": [
                {"id":"647","url":"/upload/202412/16/202412161416427478.jpg","title":"小鹏汽车"}
            ]
        };

        // 将albumData添加到全局作用域
        window.albumData = albumData;

        // 配置信息
        const config = {
            // 图片基础URL（里斯官网）
            baseImageUrl: 'https://www.ries.com.cn',

            // 响应式断点
            mobileBreakpoint: 768,

            // 时间轴最大显示数量
            maxTimelineItems: 9,

            // 懒加载配置
            lazyLoadOffset: 1,

            // 动画配置
            animationDuration: 300,


                // image-overlay 显示模式：0=关闭，1=只显示标题，2=标题+简介
                imageOverlayMode: 2,

            // 错误处理
            fallbackImage: ''
        };

        // 将config添加到全局作用域
        window.config = config;

        // 里斯官网案例简介（通过 Playwright 抓取，作为模拟数据）
        const case_list = [
            { title: "小鹏汽车", desc: "助力小鹏汽车重返新势力纯电销售第一，成为中国纯电汽车增长王" },
            { title: "长城汽车", desc: "品类创新打造五个中国第一，助力长城80到1500亿" },
            { title: "杰克", desc: "从定位快速服务到布局全球，逆袭实现全球第一" },
            { title: "卫龙", desc: "中国辣味零食增长王" },
            { title: "香飘飘", desc: "全面导入品类创新战略，助力企业实现从“奶茶之王”到“茶饮之王”的战略转型" },
            { title: "罗莱家纺", desc: "从线上渠道转为线上独立品牌，开启罗莱集团双轮驱动模式" },
            { title: "王老吉", desc: "“正宗”定位调动心智力量，助力王老吉重归凉茶王者地位" },
            { title: "老板电器", desc: "重新认识与定义品类，老板电器突破胶着竞争" },
            { title: "德邦", desc: "品类创新助力德邦晋升大件快递之王" },
            { title: "久盛", desc: "成熟品类的重生，扭转企业增长态势" },
            { title: "百洋医药迪巧", desc: "战略重整及品类创新，品牌开启连续增长，迈向骨健康绝对领导者" },
            { title: "桃李", desc: "发力短保面包，用新鲜送达成就中国面包大王" },
            { title: "农银壹私行", desc: "打造首个私人银行专家品牌，客户数和金融资产规模增量双第一" },
            { title: "奥克斯", desc: "打造互联网直卖空调全新品类，颠覆行业格局" },
            { title: "雨虹防水", desc: "专家定位助力雨虹防水成为品类寡头" },
            { title: "习酒", desc: "大师与时间的杰作，成就酱酒数一数二品牌" },
            { title: "洽洽", desc: "布局第二增长曲线，助力洽洽把握坚果行业增长极" },
            { title: "三只松鼠", desc: "打造坚果领导者定位，集聚品牌势能，助力线下拓展" },
            { title: "康巴赫", desc: "定义蜂窝锅新品类，打造高端炒锅品类之王" }
        ];
        const caseDescriptions = case_list.reduce((acc, cur) => { acc[cur.title] = cur.desc; return acc; }, {});
        window.case_list = case_list;
        window.caseDescriptions = caseDescriptions;
        // 注入到全局配置，供生成器使用
        window.config.caseDescriptions = caseDescriptions;


    </script>

    <!-- 引入依赖 -->
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script src="data-processor.js"></script>
    <script src="album-generator.js"></script>
    <script src="main.js"></script>
</body>
</html>
